<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>jQ特性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box{
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li>li_3</li>
        <li>li_4</li>
        <li>li_5</li>
        <li>li_6</li>
    </ul>
    <script src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        /*
            jQ 链式操作  原理：每步操作之后都返回调用该方法的 jQ 对象，因此可以在后面继续使用该 jQ 对象的其它方法

            jQ 隐式迭代：jQ 本身是由所有符合选择条件的 DOM 元素组成的伪数组，给 jQ 添加的任何方法都会默认遍历 这个数组，给每一项添加该方法

            jQ 忽略失败的处理   例如：删除不存在的类名
        */

        var $box = $(".box");

        var rv = $box.addClass("d1 d2")
                     .toggleClass("d3")
                     .attr("index", 1)
                     .prop("title", "hello");

        console.log(rv === $box); // true

        // $box.removeClass("d4");
        // $box[0].classList.remove("d4");


        // 给li添加方法  文字颜色变红
        $("li").css("color", "#f00")
               .attr("style", "line-height: 43px")
               .addClass("item");


        var obj = {
            say: function(){
                console.log("obj.say");
                return this;
            }
            ,run: function(){
                console.log("obj.run");
                return this;
            }
        }

        obj.say().run().say().run();
    </script>
</body>
</html>